<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="下发参数编辑"
    custom-class="stage_dialog"
    :append-to-body="true"
    :visible="stageVisible"
    width="80%"
    @close="close"
  >
    <el-table
      style="margin-top: 10px"
      :data="formulaParameter"
      border
      size="mini"
    >
      <el-table-column prop="stageId" label="阶段" align="center"
        ><template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="oneExpandInfo" label="升/降温速率" align="center"
        ><template slot-scope="scope">
          <el-input
            v-model="scope.row.oneExpandInfo"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="twoExpandInfo" label="保温设定值" align="center"
        ><template slot-scope="scope">
          <el-input
            v-model="scope.row.twoExpandInfo"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="threeExpandInfo" label="带宽" align="center"
        ><template slot-scope="scope">
          <el-input
            v-model="scope.row.threeExpandInfo"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="fourExpandInfo"
        label="小时/分钟设定值"
        width="180"
        align="center"
        ><template slot-scope="scope">
          <div class="flex-x" style="margin-bottom: 10px;">
            <span style="margin-right: 6px;">小时:</span>
            <el-input-number
              :min="0"
              size="mini"
              v-model="scope.row.hour"
            ></el-input-number>
          </div>
          <div class="flex-x">
            <span style="margin-right: 6px;">分钟:</span>
            <el-input-number
              :max="60"
              :min="0"
              size="mini"
              v-model="scope.row.minute"
            ></el-input-number>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="fiveExpandInfo"
        label="事件"
        align="center"
        width="180"
        ><template slot-scope="scope">
          <el-select
            v-model="scope.row._fiveExpandInfo"
            value-key=""
            placeholder="请选择"
            collapse-tags
            clearable
            filterable
            multiple
            size="small"
            @change="val => changeFive(val, scope.row)"
          >
            <el-option
              v-for="item in options"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="sixExpandInfo" label="分压压力" align="center"
        ><template slot-scope="scope">
          <el-input
            :disabled="sixExpandInfoDisabled(scope.row)"
            v-model="scope.row.sixExpandInfo"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot="header">
          <div class="flex-x">
            <div style="margin-right: 10px">操作</div>
            <el-button type="primary" size="small" @click="addFormula"
              >添加</el-button
            >
          </div>
        </template>
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="del(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer">
      <el-button
        type="primary"
        :loading="stageBtnloading"
        @click="submit"
        size="small"
        >{{ isIssued ? "确认下发" : "确认修改" }}</el-button
      >
      <el-button @click="close" size="small"> 取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getTaskDownLoadInfos } from "@/api/deviceOperation";
import { generateId } from "@/utils";
import { mapGetters } from "vuex";
import { is } from "@/utils/utils";
// 分钟 转 小时/分钟
function toHoursAndMinutes(totalMinutes) {
  const hour = Math.floor(totalMinutes / 60);
  const minute = totalMinutes % 60;
  return {
    hour,
    minute: minute > 0 ? minute : 0
  };
}
// 小时/分钟 转 分钟
function ChangeStrToMinutes(hour, minute) {
  var minutes = parseInt(hour) * 60 + parseInt(minute);
  return minutes;
}
const FENYA = "分压";
export default {
  props: {
    // 是否是下发按钮
    isIssued: {
      type: Boolean,
      default: false
    },
    stageVisible: {
      type: Boolean,
      default: false
    },
    stageBtnloading: {
      type: Boolean,
      default: false
    },
    formulaParameter: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapGetters(["controlDeviceInfo"]),
    _formulaInfo() {
      return this.controlDeviceInfo._formulaInfo;
    },
    sixExpandInfoDisabled() {
      return function(row) {
        if (!row._fiveExpandInfo) {
          return false;
        }
        if (is(row._fiveExpandInfo, "String")) {
          const arr = row._fiveExpandInfo.split(",");
          return !arr.some(s => s == FENYA);
        } else {
          return !row._fiveExpandInfo.some(s => s == FENYA);
        }
      };
    }
  },

  data() {
    return {
      // formulaParameter: [],
      options: [
        {
          label: "真空冷"
        },
        {
          label: "静态冷"
        },
        {
          label: "强制冷却"
        },
        {
          label: "正压"
        },
        {
          label: "工件偶确保保温"
        },
        {
          label: "泄露测试"
        },
        {
          label: "分压"
        }
      ]
    };
  },
  watch: {
    stageVisible(newVal) {
      if (newVal) {
        this.formulaParameter.forEach(item => {
          let { fourExpandInfo, fiveExpandInfo } = item;
          if (fiveExpandInfo) {
            this.$set(item, "_fiveExpandInfo", fiveExpandInfo.split(","));
            this.$set(
              item,
              "sixExpandInfoDisabled",
              !item._fiveExpandInfo.some(f => f == FENYA)
            );
          } else {
            this.$set(item, "_fiveExpandInfo", []);
          }
          if (is(fourExpandInfo, "Number")) {
            const hm = toHoursAndMinutes(fourExpandInfo);
            this.$set(item, "hour", hm.hour || 0);
            this.$set(item, "minute", hm.minute || 0);
          } else {
            const hm = toHoursAndMinutes(Number(fourExpandInfo));
            this.$set(item, "hour", hm.hour || 0);
            this.$set(item, "minute", hm.minute || 0);
            console.log("hm :>> ", hm, item);
          }
        });
      }
    }
  },
  mounted() {
    // 获取任务下发弹框列表
    // this.getTaskDownLoadInfos();
  },
  methods: {
    // 事件
    changeFive(val, row) {
      if (!val.some(item => item == FENYA)) {
        row.sixExpandInfo = "";
      }
    },

    // 删除阶段
    del(index) {
      // this.formulaParameter.splice(index, 1);
      this.$emit("del", index);
    },

    submit() {
      this.formulaParameter.forEach(item => {
        item.fourExpandInfo = ChangeStrToMinutes(item.hour, item.minute);
        item.fiveExpandInfo = item._fiveExpandInfo.join(",");
      });
      console.log("this.formulaParameter :>> ", this.formulaParameter);
      this.$emit("submit");
    },
    addFormula() {
      let form = {
        oneExpandInfo: "",
        twoExpandInfo: "",
        threeExpandInfo: "",
        fourExpandInfo: "",
        fiveExpandInfo: "",
        _fiveExpandInfo: [],
        sixExpandInfo: "",
        sevenExpandInfo: "",
        eightExpandInfo: "",
        nineExpandInfo: "",
        tenExpandInfo: "",
        hour: "",
        minute: ""
      };
      this.$emit("addFormula", form);
    },
    close() {
      this.$emit("update:stageVisible", false);
    }
  }
};
</script>

<style lang="scss">
.stage_dialog {
  .el-radio {
    margin-right: 10px;
  }
}
</style>
